<template>
    <div class="app">
        <div>
            <input type="text"
                   class="inputs"
                   v-model="city"
                   placeholder="请输入要查询的天气"
                   @keyup.enter="searchWeather" hidden/>
            <!--<el-button type="success" @click="searchWeather">
                查找
            </el-button>-->
        </div>

        <ul>
            <li v-for="item in weatherList" :key="item.id">
                <!--<div><span class="types">{{item.type}}</span></div>-->
                <div>
                    <b class="bs">{{item.type}}&nbsp;{{item.low}}</b>
                        ~
                    <b class="bs">{{item.high}}</b>
                </div>
                <!--<div><span class="dates">{{item.date}}</span></div>-->
            </li>
        </ul>
    </div>
</template>

<script>
    export default({
        name:"Weather",
        props: ["hotersear"],
        data(){
            return{
                city:'',
                weatherList:[]
            }
        },
        methods: {
            searchWeather(){
                var that = this;
                this.$axios.get('http://wthrcdn.etouch.cn/weather_mini?city=' + this.city)
                    .then(function(response){
                        that.weatherList = response.data.data.forecast.splice(0,1);
                        //console.log(response.data.data.forecast)
                        // eslint-disable-next-line no-unused-vars
                    }).catch(function(err){
                })
            },
            changeCity(city){
                this.city = city;
                this.searchWeather();
            }
        },
        created(){//自动加载事件
            this.changeCity('天津');
        }
    })
</script>
<style>
    /*.app{*/
    /*    width:600px;*/
    /*    text-align:center;*/
    /*    height:300px;*/
    /*    border:1px solid #41a1cb;*/
    /*    padding:50px;*/
    /*    border-radius: 2px*/
    /*}*/
    /*.types{*/

    /*    color:#eedf6d;*/
    /*}*/
    /*.bs{*/

    /*    color:#eedf6d;*/
    /*}*/
    /*.dates{*/

    /*    color:#909399;*/
    /*}*/
    /*.inputs{*/
    /*    width:300px;*/
    /*    height:38px;*/
    /*    padding:5px;*/
    /*    border:1px solid #41a1cb;*/
    /*    border-radius: 4px;*/
    /*}*/
</style>